<script setup>
// 定义组件属性及默认值
const props = defineProps({
  // 按钮类型（主要用于样式区分）
  type: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 按钮文本内容
  content: {
    type: String,
    default: ''
  }
})

// 定义点击事件
const emit = defineEmits(['click'])
</script>

<template>
  <div
    class="h-[32px] rounded-[4px] flex items-center justify-center cursor-pointer pl-[16px] pr-[16px] pt-[8px] pb-[8px] transition-opacity"
    :class="{
      'bg-gray-200': !type || (type !== 'primary' && !disabled), // 仅非primary时显示灰色
      'bg-[#165DFF] text-white': type === 'primary' && !disabled,
      'opacity-50 cursor-not-allowed': disabled,
    }" @click="!disabled && emit('click')" :aria-disabled="disabled">
    <div v-if="'icon' in $slots" class="mr-2">
      <slot name="icon"></slot>
    </div>
    <div v-if="'default' in $slots">
      <slot></slot>
    </div>
    <span v-else class="text-sm font-medium">{{ content ?? '按钮' }}</span>
  </div>
</template>
